<template>
  <div class="keyword-filter">
    <!-- 搜索和过滤区域 -->
    <div class="filter-header">
      <div class="filter-left">
        <el-input
          v-model="searchForm.word"
          placeholder="搜索敏感词"
          style="width: 200px; margin-right: 16px"
          clearable
          @clear="loadKeywordList"
          @keyup.enter="loadKeywordList"
        >
          <template #append>
            <el-button @click="loadKeywordList">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
        <el-select
          v-model="searchForm.status"
          placeholder="状态"
          clearable
          style="width: 120px; margin-right: 16px"
          @change="loadKeywordList"
        >
          <el-option label="正常" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </div>
      <el-button type="primary" @click="handleAdd">添加敏感词</el-button>
    </div>

    <!-- 关键词列表表格 -->
    <el-table
      :data="keywordList"
      style="width: 100%"
      border
      v-loading="loading"
    >
      <el-table-column prop="keyword" label="敏感词" />
      <el-table-column prop="triggerCount" label="触发次数" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 0 ? 'success' : 'danger'">
            {{ row.status === 0 ? "正常" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" align="center" width="300px">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            :type="scope.row.status === 0 ? 'warning' : 'success'"
            size="small"
            @click="handleToggleStatus(scope.row)"
          >
            {{ scope.row.status === 0 ? "禁用" : "启用" }}
          </el-button>
          <el-button
            type="info"
            size="small"
            @click="handleShowRecord(scope.row)"
          >
            触发记录
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :total="pagination.total"
        @current-change="loadKeywordList"
        layout="total, prev, pager, next"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import {
  getSensitiveWordList,
  deleteSensitiveWord,
  updateSensitiveWord,
} from "@/api/sensitiveWord";

const emit = defineEmits(["add", "edit", "show-record"]);

// 加载状态
const loading = ref(false);

// 关键词列表数据
const keywordList = ref([]);

// 搜索表单
const searchForm = ref({
  word: "",
  status: null,
});

// 分页参数
const pagination = ref({
  page: 1,
  limit: 10,
  total: 0,
});

// 加载关键词列表
const loadKeywordList = async () => {
  loading.value = true;
  try {
    const res = await getSensitiveWordList({
      page: pagination.value.page,
      limit: pagination.value.limit,
      word: searchForm.value.word,
      status: searchForm.value.status,
    });
    if (res && res.list) {
      keywordList.value = res.list.map((item) => ({
        id: item._id,
        keyword: item.word,
        status: item.status,
        createTime: new Date(item.createdAt).toLocaleString(),
        triggerCount: item.triggerCount,
      }));
      pagination.value.total = res.pagination.total;
    }
  } catch (error) {
    ElMessage.error("获取关键词列表失败");
  } finally {
    loading.value = false;
  }
};

// 处理添加
const handleAdd = () => {
  emit("add");
};

// 处理编辑
const handleEdit = (row) => {
  emit("edit", row);
};

// 处理显示记录
const handleShowRecord = (row) => {
  emit("show-record", row);
};

// 切换状态
const handleToggleStatus = async (row) => {
  try {
    await updateSensitiveWord(row.id, {
      status: row.status === 0 ? 1 : 0,
    });
    ElMessage.success("状态更新成功");
    loadKeywordList();
  } catch (error) {
    ElMessage.error("状态更新失败");
  }
};

// 删除关键词
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm("确定要删除该关键词吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    await deleteSensitiveWord(row.id);
    ElMessage.success("删除成功");
    loadKeywordList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
};

// 暴露方法给父组件
defineExpose({
  loadKeywordList,
});

// 页面加载时获取数据
onMounted(() => {
  loadKeywordList();
});
</script>

<style scoped>
.keyword-filter {
  padding: 20px 0;
}

.filter-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-left {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 